<template>
  <div>
    <VueUeditorWrap @ready="ready" v-model="message" :config="myConfig" />
  </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  name: 'ExamUEditor',
  components: {
    VueUeditorWrap,
  },
  data() {
    return {
      editorInstance: '',
      message: '',
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: this.ueHeight,
        // 初始容器宽度
        initialFrameWidth: this.ueWidth,
        // 上传文件接口
        serverUrl: '',
        UEDITOR_HOME_URL: '/UEditor/',
        toolbars: [
          [
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'removeformat',
            'formatmatch',
            'cleardoc',
            '|',
            'insertimage',
          ],
        ],
      },
    }
  },
  watch: {
    defaultMsg(val) {
      this.message = val
    },
  },
  props: {
    //编辑器高度
    ueHeight: {
      type: Number,
      default: 100,
    },
    //编辑器宽度
    ueWidth: {
      type: Number,
      default: 700,
    },
    //编辑器默认值
    defaultMsg: {
      type: String,
    },
  },
  mounted() {
    this.message = this.defaultMsg
  },
  methods: {
    ready(editorInstance) {
      this.editorInstance = editorInstance
    },
    //插入空格
    insertContentHandle(text) {
      this.editorInstance.execCommand('inserthtml', text)
    },
    //删除空格
    deleteContentHandle(text) {
      this.message = this.message.replace(text, '')
    },
  },
}
</script>
